import { IconDouyin } from '@/components/icon';
import IconToutiao from '@/components/icon/IconToutiao';
import IconWeChatOfficialAccount from '@/components/icon/IconWeChatOfficialAccount';
import IconWeibo from '@/components/icon/IconWeibo';
import { selectPriority } from '@/services/api/api-assess-priority';
import { LaptopOutlined, SwitcherOutlined } from '@ant-design/icons';
import { ActionType, DrawerForm, ProList } from '@ant-design/pro-components';
import { useAccess } from 'umi';
import { Divider, Space, Spin, Tag, Typography, Upload } from 'antd';
import React, { useRef, useState } from 'react';
const { Paragraph } = Typography;
interface DetailPriorityProps {
  areaId: string;
  areaName: string;
  releaseTimes: Array<string>; //季度发布时间范围
  id: string;
  recordName: string;
  onRefurbish: () => void;
}

const DetailPriority: React.FC<DetailPriorityProps> = ({
  areaId,
  areaName,
  releaseTimes,
  id,
  recordName,
  onRefurbish,
}) => {
  const access = useAccess();
  const actionRef = useRef<ActionType>();

  const [details, setDetailsState] = useState<AssessPriorityData.PrioritySelect>();

  const getDetail = async () => {
    const res = await selectPriority({ id });

    setDetailsState(res.data);

    let proves = res.data.proves.map((prove) => {
      let channelName = prove.channelName;

      let icon;

      switch (channelName) {
        case '微信公众号':
          icon = <IconWeChatOfficialAccount width={18} height={18} />;
          break;
        case '微博':
          icon = <IconWeibo width={18} height={18} />;
          break;
        case '抖音':
          icon = <IconDouyin width={18} height={18} />;
          break;
        case '网站':
          icon = <IconToutiao width={18} height={18} />;
          break;
        case '客户端':
          icon = <LaptopOutlined />;
          break;
        default:
          channelName = '';
          icon = <SwitcherOutlined />;
          break;
      }

      return {
        ...prove,
        title: channelName,
        icon: icon,
        attachments: prove.attachments.map((e) => {
          return {
            ...e,
            file: {
              uid: e.id,
              name: e.name,
              thumbUrl: e.content,
              type: e.mimeType,
              status: 'done',
            },
          };
        }),
      };
    });

    console.log('=========', proves);

    setProveState(proves);
  };

  const [proves, setProveState] = useState<PriorityBo.ProveData[]>([]);

  const viewProveList = (dataSource: PriorityBo.ProveData[]) => {
    return (
      <ProList<PriorityBo.ProveData>
        toolBarRender={false}
        rowKey="id"
        showActions="hover"
        grid={{ gutter: 16, column: 1 }}
        headerTitle={false}
        dataSource={dataSource}
        itemCardProps={{
          bodyStyle: {
            paddingTop: 0,
            paddingLeft: 12,
            paddingRight: 12,
            paddingBottom: 12,
          },
        }}
        metas={{
          title: {
            render: (dom: React.ReactNode, entity: PriorityBo.ProveData, index: number, action) => (
              <Space align={'center'}>
                {entity.icon}
                {entity.title}
              </Space>
            ),
          },

          content: {
            render: (dom: React.ReactNode, entity: PriorityBo.ProveData, index: number, action) => {
              console.log('==11111========', entity);

              return (
                <div>
                  {entity.remarks && (
                    <Typography.Paragraph style={{}}>
                      <blockquote>{entity.remarks}</blockquote>
                    </Typography.Paragraph>
                  )}
                  <Upload
                    listType="picture-card"
                    fileList={entity?.attachments?.map((item) => item.file)}
                    showUploadList={{
                      showRemoveIcon: false,
                    }}
                  />
                </div>
              );
            },
          },
        }}
      />
    );
  };

  return (
    <DrawerForm
      title={
        <Space>
          <div>{details?.recordName}</div>
          <Tag color={'warning'}>重点报道</Tag>
        </Space>
      }
      resize={{
        onResize() {
          console.log('resize!');
        },
        maxWidth: window.innerWidth * 0.8,
        minWidth: 400,
      }}
      trigger={<a>{recordName}</a>}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
        width: 900,
      }}
      onOpenChange={(visible) => {
        if (visible) {
          getDetail();
        } else {
          onRefurbish();
          setProveState([]);
        }
      }}
      onFinish={async (values) => {}}
    >
      <Spin
        style={{
          textAlign: 'center',
        }}
        spinning={details === undefined}
      >
        <Typography.Paragraph>
          <blockquote>
            在微博、微信公众号、抖音、今日头条单报道单平台转发量超1万、阅读量超5万得0.8分。
          </blockquote>
          <blockquote>在自有平台转发量超1万、阅读量超5万得0.2分。</blockquote>
          <blockquote>此项累计得分上限为30分。</blockquote>
        </Typography.Paragraph>
        <Divider
          orientation="left"
          plain
          style={{
            marginTop: '30px',
          }}
        >
          新媒体平台
        </Divider>
        {proves.length > 0 &&
          viewProveList(
            proves.filter(
              (item) =>
                item.title == '微信公众号' ||
                item.title == '微博' ||
                item.title == '抖音' ||
                item.title == '今日头条',
            ),
          )}
        <Divider orientation="left" plain>
          自有平台
        </Divider>
        {proves.length > 0 &&
          viewProveList(
            proves.filter(
              (item) =>
                item.title == '网站' || item.title == '客户端',
            ),
          )}
      </Spin>
    </DrawerForm>
  );
};
export default DetailPriority;
